<!--
 * @Author: zhuhaohua 250293786@qq.com
 * @Date: 2024-01-02 10:21:51
 * @LastEditors: zhuhaohua 250293786@qq.com
 * @LastEditTime: 2024-06-13 17:54:27
 * @FilePath: \heart-backed\src\views\banner\index.vue
 * @Description: 我的形象
-->
<template>
  <div class="my-container">
    <div class="page-title">我的形象</div>
    <div class="page-body">
      <div v-for="item in dataList" :key="item.uid" class="my-list-box">
        <div class="list-cont">
          <img class="z-img" :src="item.actor_thumbnail" alt="" />
          <el-button class="pre-btn" type="primary" plain @click="chooseFun(item)">预览</el-button>
        </div>
        <div class="list-title">{{ item.actor_name }}</div>
      </div>
    </div>
    <div class="page-foot">
      <PaginationCom :pagination-data="pagination" :page-sizes="pageSizes" @paginationFun="paginationFun" />
    </div>
    <el-dialog title="预览视频" :visible.sync="dialogShow" :destroy-on-close="true">
      <div class="video-box">
        <video class="my-video" width="800" height="600" controls>
          <source :src="showData.actor_demo_url" type="video/mp4" />
          <source :src="showData.actor_demo_url" type="video/ogg" />
          您的浏览器不支持 video 标签。
        </video>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import PaginationCom from '@/components/pagination/pagination'
import { getCustomApi } from '@/api/my-image'
export default {
  components: {
    PaginationCom
  },
  data() {
    return {
      allData: [],
      dataList: [
        {
          'uid': '1MWplTEX',
          'actor_name': '赛枫-米白衬衫', // 人物名称
          'actor_gender': '0', // 性别:f=女,m=男
          'actor_description': '', // 简介
          'actor_demo_url': 'https://api.cyrinn.cn/api/mio/sap/avatars/aaron/20230423/49b8369a.mp4', // 示例视频地址
          'actor_thumbnail': 'https://api.cyrinn.cn/api/mio/sap/avatars/wangfu/20230522/9c93e36c.jpg', // 封面图
          'actor_type_name': '商务', // 类型
          'actor_width': '1080', // 宽
          'actor_height': '1920', // 高
          'create_datetime': '2024-04-16 12:02:28',
          'update_datetime': '2024-04-16 12:02:28',
          'custom_switch': 1
        }
      ],
      pagination: {
        currentPage: 1,
        pageSize: 1000,
        total: 0
      },
      pageSizes: [10, 20, 30, 40],
      dialogShow: false,
      showData: {}
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      getCustomApi().then(res => {
        this.allData = res.data
        this.setData()
      })
    },
    paginationFun(val) {
      this.pagination = val
      this.setData()
    },
    chooseFun(item) {
      this.showData = JSON.parse(JSON.stringify(item))
      this.dialogShow = true
    },
    setData() {
      const e = this.pagination.currentPage * this.pagination.pageSize
      const s = e - this.pagination.pageSize
      this.dataList = this.allData.slice(s, e)
    }
  }
}
</script>
<style lang="scss" scoped>
.my-container {
  padding: 20px;
  background: #FFFFFF;
  width: 100%;
  height: 100%;

  .page-title {
    font-weight: 600;
    font-size: 20px;
    color: #1C1F23;
    line-height: 23px;
    text-align: left;
    height: 40px;
  }

  .page-body {
    width: 100%;
    height: calc(100% - 90px);
    overflow-y: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;

    .my-list-box {
      width: 260px;
      height: 175px;
      margin: 20px;

      .list-cont {
        background: #F4F5F9;
        border-radius: 4px;
        border: 1px solid #04D1B8;
        width: 100%;
        height: 152px;
        line-height: 152px;
        position: relative;
        text-align: center;

        .z-img {
          width: auto;
          height: auto;
          max-width: 100%;
          max-height: 100%;
        }

        .pre-btn {
          position: absolute;
          bottom: 1px;
          left: 1px;
          padding: 6px 20px;
        }
      }

      .list-title {
        font-weight: 400;
        font-size: 12px;
        color: #1C1F23;
        text-align: left;
        line-height: 23px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }

  .page-foot {
    width: 100%;
    height: 50px;
  }

  .video-box {
    width: 800px;
    height: 600px;

    .my-video {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
